<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemLRForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormType!=='view'?dialogRules:{}"
             :class="dialogFormType==='view'?'formTable':''" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):'12rem'" >
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col :span="24">
          <el-form-item label="输入框" prop="input">
            <el-input v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.input" placeholder="请输入" show-word-limit maxlength="100"></el-input>
            <span v-else>{{ dialogForm.input }}</span>
          </el-form-item>
        </el-col>

        <!--
          控制小数： v-input.float = {
            float 精确小数位 = 默认小数位数为0
            min 最小值(可输入负数） = 最小值为0
            max 最大值 = 最大值为1000000000
            zeroBool 是否可以输入0  =  默认true 可以输入0   false 不可以输入0
          }
        -->
        <el-col :span="24">
          <el-form-item label="输入数字" prop="digit">
            <el-input
                v-if="dialogFormType !== 'view'"
                v-model="dialogForm.digit"
                v-input.float="{'float':2,'min':0,'max':100000000000000,zeroBool:false}"
                placeholder="请输入"
                type="number"
                @focus="focusNumBerFun($event)"
                @blur="blurNumBerFun($event,2,dialogForm,'digit')"
            ></el-input>
            <span v-else>{{ numberFormat(dialogForm.digit,2,'.',',','round') }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="下拉选择(单选)" prop="singleSelect">
            <el-select v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.singleSelect">
              <el-option
                  v-for="item in singleSelectOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
            <span v-else>{{ getDictLabelMixins('singleSelectOptions',dialogForm.singleSelect) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="下拉选择(多选)" prop="multipleSelect">
            <el-select v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.multipleSelect" multiple>
              <el-option
                  v-for="item in singleSelectOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
            <span v-else>{{ getDictLabelMixins('singleSelectOptions',dialogForm.multipleSelect) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="单选框" prop="radio">
            <el-radio-group v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.radio">
              <el-radio
                  v-for="item in singleSelectOptions"
                  :key="item.dictValue"
                  :label="item.dictValue"
              >
                {{item.dictLabel}}
              </el-radio>
            </el-radio-group>
            <span v-else>{{ getDictLabelMixins('singleSelectOptions',dialogForm.radio) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="复选框" prop="checkbox">
            <el-checkbox-group v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.checkbox">
              <el-checkbox
                  v-for="item in singleSelectOptions"
                  :key="item.dictValue"
                  :label="item.dictValue"
              >
                {{ item.dictLabel }}
              </el-checkbox>
            </el-checkbox-group>
            <span v-else>{{ getDictLabelMixins('singleSelectOptions',dialogForm.checkbox) }}</span>
          </el-form-item>
        </el-col>

        <!-- 时间：
          type = year  单  -> 年
          type = month 单  -> 年/月
          type = date  单  -> 年/月/日
          ----------------------------------------------------------
          type = years  多  -> 年
          type = months 多  -> 年/月
          type = dates  多  -> 年/月/日
          ----------------------------------------------------------
          type = week -> 第几周
          ----------------------------------------------------------
          type = datetime -> 年/月/日 时:分:秒
          ----------------------------------------------------------
          type = datetimerange -> 区间值 年/月/日 时:分:秒
          type = daterange     -> 区间值 年/月/日
          type = monthrange    -> 区间值 年/月
          **************************************************************

        -->
        <el-col :span="24">
          <el-form-item label="日期" prop="date">
            <el-date-picker
                v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.date" type="date" placeholder="请选择"
                value-format="yyyy-MM-dd" size="small"
            >
            </el-date-picker>
            <span v-else>  {{ parseTime( dialogForm.date ,'{y}-{m}-{d}') }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="时间" prop="time">
            <el-date-picker
                v-if="dialogFormType !== 'view'" v-model.trim="dialogForm.time" type="datetime" placeholder="请选择"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" size="small"
            >
            </el-date-picker>
            <span v-else> {{ parseTime( dialogForm.time ,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="招标公告及报名开始时间" prop="signTime">
            <el-date-picker v-if="dialogFormType=='form'" v-model.trim="dialogForm.signTime" type="date" placeholder="请选择" value-format="yyyy-MM-dd" size="small" style="width:100%" @change="timeChangeFun(dialogForm,'start','招标公告及报名开始时间','signTime','招标公告及报名结束时间','signEndTime')"></el-date-picker>
            <span v-else>  {{ parseTime( dialogForm.signTime ,'{y}-{m}-{d}') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="招标公告及报名结束时间" prop="signEndTime">
            <el-date-picker v-if="dialogFormType=='form'" v-model.trim="dialogForm.signEndTime" type="date" placeholder="请选择" value-format="yyyy-MM-dd" size="small" style="width:100%" @change="timeChangeFun(dialogForm,'end','招标公告及报名开始时间','signTime','招标公告及报名结束时间','signEndTime')"></el-date-picker>
            <span v-else>  {{ parseTime( dialogForm.signEndTime ,'{y}-{m}-{d}') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
                v-if="dialogFormType !== 'view'"
                v-model="dialogForm.remark"
                placeholder="请输入"
                rows="3"
                type="textarea"
                show-word-limit maxlength="1000"
            ></el-input>
            <span v-else>{{ dialogForm.remark }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="富文本编辑器" class="width-100" prop="content">
            <wangEitor
              ref="wangEitor"
              :readOnlyBool="dialogFormType == 'form' ? false : true"
              :class="dialogFormType == 'form' ? '' : 'form-wang-eitor'"
              class="width-100" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="图片单传一张" prop="imageIds">
            <!-- 修改后：附件上传(混合超大附件 ji) -->
            <!-- uploadType  上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list -->
            <uploadFile
                ref="uploadFile" uploaderName="image"
                uploadType="image" :uploadBtn="dialogFormType !== 'view'"
                btnTitle="上传报告" btnType="primary"
                :isAccept="true" :acceptArr="['.jpg','.png','.jpeg']"
                :multiple="false" :limit="1" :showList="true"
                :deleteBool="dialogFormType !== 'view'"
                :successList="dialogForm.imageList"
                @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','image')"
                @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','image',false, 'image')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="图片多传" prop="imageMultipleIds">
            <!-- 修改后：附件上传(混合超大附件 ji) -->
            <!-- uploadType  上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list -->
            <uploadFile
                ref="uploadFile" uploaderName="imageMultiple"
                uploadType="image" :uploadBtn="dialogFormType !== 'view'"
                btnTitle="上传报告" btnType="primary"
                :isAccept="true" :acceptArr="['.jpg','.png','.jpeg']"
                :multiple="true" :limit="1" :showList="true"
                :deleteBool="dialogFormType !== 'view'"
                :successList="dialogForm.imageMultipleList"
                @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','imageMultiple')"
                @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','imageMultiple',true, 'image')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="formRow">
        <el-col :span="24">
          <el-form-item label="附件单传一个" prop="annexIds">
            <!-- 修改后：附件上传(混合超大附件 ji) -->
            <!-- uploadType  上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list -->
            <uploadFile
                ref="uploadFile" uploaderName="annex"
                uploadType="btnList" :uploadBtn="dialogFormType !== 'view'"
                btnTitle="上传报告" btnType="primary"
                :isAccept="true" :acceptArr="['.rar','.zip','.doc','.docx','.pdf','.xls','.xlsx','.jpg','.png','.jpeg']"
                :multiple="false" :limit="1" :showList="true"
                :deleteBool="dialogFormType !== 'view'"
                :successList="dialogForm.annexList"
                @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','annex')"
                @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','annex',false, '')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="附件上传多传" prop="annexMultipleIds">
            <!-- 修改后：附件上传(混合超大附件 ji) -->
            <!-- uploadType  上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list -->
            <uploadFile
                ref="uploadFile" uploaderName="annexMultiple"
                uploadType="btnList" :uploadBtn="dialogFormType !== 'view'"
                btnTitle="上传报告" btnType="primary"
                :isAccept="true" :acceptArr="['.rar','.zip','.doc','.docx','.pdf','.xls','.xlsx','.jpg','.png','.jpeg']"
                :multiple="true" :limit="1" :showList="true"
                :deleteBool="dialogFormType !== 'view'"
                :successList="dialogForm.annexMultipleList"
                @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','annexMultiple')"
                @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','annexMultiple',true, '')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <!-- 修改后：附件上传(混合超大附件 ji) -->
          <!-- uploadType  上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list -->
          <uploadFile
              ref="uploadFile" uploaderName="annexOne"
              formItemProp="annexOneId"
              uploadType="btnTableList" :uploadBtn="dialogFormType !== 'view'"
              btnTitle="上传附件表格list" btnType="primary"
              :isAccept="false" :acceptArr="['.rar','.zip','.doc','.docx','.pdf','.xls','.xlsx','.jpg','.png','.jpeg']"
              :multiple="true" :limit="1"
              :showList="true"
              :deleteBool="dialogFormType !== 'view'"
              :successList="dialogForm.annexOneList"
              @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','annexOne')"
              @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','annexOne',true, '')"
          />
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="dialogFormType!=='view'" type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// -------------------------------------------------------------
export default {
  mixins: [dialogFormMixins],
  components: { },
  data() {
    return {
      // 表单参数
      dialogForm: {
        input: null,
        digit: null,
        singleSelect: null, // '0'
        multipleSelect: null, // ['1','2']
        radio: null, // '0'
        checkbox: [], // ['1','2']
        date: null,
        time: null,
        remark:null,
        content:null,
        imageList: [],
        imageIds: [],
        imageMultipleList: [],
        imageMultipleIds: [],
        annexList: [],
        annexIds: [],
        annexMultipleList: [],
        annexMultipleIds: [],
        annexOneList: [],
        annexOneIds: [],
        tableList: [
          {
            input: null,
            digit: null,
            singleSelect: null, // '0'
            multipleSelect: null, // ['1','2']
            radio: null, // '0'
            checkbox: [], // ['1','2']
            imageList: [],
            imageIds: [],
            imageMultipleList: [],
            imageMultipleIds: [],
            annexList: [],
            annexIds: [],
            annexMultipleList: [],
            annexMultipleIds: []
          }
        ]
      },
      // form表单验证
      dialogRules: {
        input: [{ required: true, message: '请输入输入框', trigger: 'blur' }],
        digit: [{ required: true, message: '请输入输入数字', trigger: 'blur' }],
        singleSelect: [{ required: true, message: '请选择下拉选择(单选)', trigger: 'change' }],
        multipleSelect: [{ required: true, message: '请选择下拉选择(多选)', trigger: 'change' }],
        radio: [{ required: true, message: '请选择单选框', trigger: 'change' }],
        checkbox: [{ required: true, message: '请选择复选框', trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        time: [{ required: true, message: '请选择时间', trigger: 'change' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        imageIds: [{ required: true, message: '请上传单传一张', trigger: 'change' }],
        imageMultipleIds: [{ required: true, message: '请上传多传', trigger: 'change' }],
        annexIds: [{ required: true, message: '请上传上传单传一个', trigger: 'change' }],
        annexMultipleIds: [{ required: true, message: '请上传多传', trigger: 'change' }],
        annexOneId: [{ required: true, message: '请上传', trigger: 'change' }],
        content: [{ required: true, msg: '富文本编辑器', validator: (rule, value, callback) => this.wangEitorFun(rule, value, callback, 'wangEitor'), trigger: 'blur' }]
      },
      // 模仿 字典数据
      singleSelectOptions: [] // 业务类型
    }
  },
  created() {},
  mounted() {
    // 业务类型 字典
    this.getDictMixins('singleSelectOptions', 'sys_user_sex')
  },
  methods: {
    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        input: null,
        digit: null,
        singleSelect: null, // '0'
        multipleSelect: null, // ['1','2']
        radio: null, // '0'
        checkbox: [], // ['1','2']
        date: null,
        time: null,
        remark:null,
        content:null,
        imageList: [],
        imageIds: [],
        imageMultipleList: [],
        imageMultipleIds: [],
        annexList: [],
        annexIds: [],
        annexMultipleList: [],
        annexMultipleIds: [],
        annexOneList: [],
        annexOneIds: [],
        tableList: [
          {
            input: null,
            digit: null,
            singleSelect: null, // '0'
            multipleSelect: null, // ['1','2']
            radio: null, // '0'
            checkbox: [], // ['1','2']
            imageList: [],
            imageIds: [],
            imageMultipleList: [],
            imageMultipleIds: [],
            annexList: [],
            annexIds: [],
            annexMultipleList: [],
            annexMultipleIds: []
          }
        ]
      }
      this.$nextTick(() => {
        this.resetForm('dialogForm')
      })
    },

    /**
     * @description: 保存
     * @Author: baoxuhui
     * @return {*}
     */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null
          let type = null
          if (this.dialogForm.id !== undefined) {
            url = '/budget-account/update'
            type = '修改'
          } else {
            url = '/relevant-regulation/save'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @param {*} row // 数据
     * @return {*}
     */
    dialogDetailApi(row) {
      const data = { id: row.id }
      // const url = '/budget-account/get'
      // this.dialogGetDetailMixins(url, data)
    },

    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} res
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      if(this.$refs.wangEitor){
        this.$refs.wangEitor.html = res.data.content
      }
      this.dialogForm = data
      this.dialogFormLoading = false
    }

  }
}
</script>
